//<script>
BASE_PRODUCTO = BASE_URL + 'productos/';
function iconPrice(valor){
    var src = BASE_IMAGE + 'price.png';
    var title = 'Precio';
    var urlAction = BASE_PRODUCTO + 'precio';
    var params = 'productoId='+ valor + '&gridPanelId='+ prefijoTabPanel + '<?php echo $idTab?>';
    return htmlImage(src, title, urlAction, params);
}

function iconImage(valor){
    var src = BASE_IMAGE + 'image_add.png';
    var title = 'Imagenes';
    var urlAction = BASE_PRODUCTO + 'images';
    var params = 'productoId='+ valor + '&gridPanelId='+ prefijoTabPanel + '<?php echo $idTab?>';
    return htmlImage(src, title, urlAction, params);
}
jsonConfigs = [
    {
        text:'Nuevo Producto',
        iconCls:'button_add',
        handler: function(){
            requestView(
                BASE_PRODUCTO + 'form',
                {gridPanelId:prefijoTabPanel + '<?php echo $idTab?>'}
            );
        }
    }
];
var productosStore = Ext.create('Ext.data.JsonStore',{
    proxy: {
        type:'ajax',
        actionMethods:{read:'POST'},
        api:{read: BASE_PRODUCTO+'paginateList'},
        reader:{type: 'json',root: 'data',totalProperty: 'total',idProperty: 'name'},
        writer:{encode: true,type: 'json',root: 'data'},
        listeners: {
            exception: function(proxy, response, operation){
                Ext.MessageBox.show({
                    title: 'ERROR',
                    msg: operation.getError(),
                    icon: Ext.MessageBox.ERROR,
                    buttons: Ext.Msg.OK
                });
            }
        }
    },
    fields: [
        'id', 'marca_id', 'categoria_id', 'genero_id',
        'referencia', 'descripcion', 'colores', 'creado',
        'modificado','marca_nombre', 'categoria_nombre',
        'genero_nombre', 'observaciones'
    ],
    autoLoad:true,
    remoteSort : true,
    pageSize: <?php echo $pageSize?>
});
var pager = Ext.create('Ext.PagingToolbar',{
    store: productosStore,
    displayInfo: true,
    displayMsg: '{0} - {1} de {2} Proveedores',
    emptyMsg: 'No existen registros para mostrar'
});
Ext.create('Ext.grid.GridPanel',{
    id: prefijoTabPanel + '<?php echo $idTab?>',
    title:'Módulo de <?php echo $title?>',
    closable: true,
    store: productosStore,
    columns: [
        {xtype: 'rownumberer'},
        {header: '', dataIndex: 'id', width:24,renderer: iconImage},
        {header: '', dataIndex: 'id', width:24,renderer: iconPrice},
        {header: 'Ref.', dataIndex: 'referencia'},
        {header: 'Descripción', dataIndex: 'descripcion',flex:1},
        {header: 'Colores', dataIndex: 'colores'},
        {header: 'Categoria', dataIndex: 'categoria_nombre'},
        {header: 'Marca', dataIndex: 'marca_nombre'},
        {header: 'Genero', dataIndex: 'genero_nombre',width:45},
        // 'creado', 'modificado' -> No listados
        {header: 'Observaciones', dataIndex: 'observaciones'}
    ],
    border: false,
    stripeRows: true,
    autoDestroy:true,
    bbar: pager,
    tbar: createToolBar(jsonConfigs),
    listeners:{
        itemDblClick: function(view,record) {
            requestView(
                BASE_PRODUCTO + 'form',
                {
                    gridPanelId:prefijoTabPanel + '<?php echo $idTab?>',
                    productoId : record.get('id')
                }
            );
        }
    }
});